<#import "/common/base.ftl" as base/>
<#import "/common/button.ftl" as but/>
<#import "/common/tableOpt.ftl" as tabt/>
<#import "/common/widget.ftl" as widget/>
<#assign jses=[
"/js/service/protocolc.js",
"/js/app/protocolc_trap.js"] in base/>
<#assign csses=["/webjars/1.0.0/css/colors.css","/css/iconfont.css","/css/index.css"] in base/>
<@base.page "">
    <div class="grid-content bg-purple-light" id="main_content">
        <el-col :span="24" class="content-wrapper">
            <section>
                <el-col :span="24" class="toolbar">
                    <el-row>
                        <el-button plain size="small" icon="el-icon-back" @click="goBack">返回</el-button>
                        <label>Trap list</label>
                    </el-row>
                    <el-row>
                        <el-button type="success" plain size="small" icon="el-icon-plus" @click="maddRow"
                                   :disabled="!addAble">添加
                        </el-button>
                        <el-button type="danger" plain size="small" icon="el-icon-delete" @click="mdeleteRow(selectedRows)"
                                   :disabled="selectedRows.length<=0">删除
                        </el-button>
                    </el-row>
                    <el-form inline="true" :model="searchVm">
                        <el-form-item label="">
                            <el-input style="width: 150px;" v-model="searchVm.mid" clearable
                                      placeholder="mib id"
                                      clearable="true"></el-input>
                        </el-form-item>
                        <el-form-item label="">
                            <el-input style="width: 150px;" v-model="searchVm.name" clearable placeholder="描述"
                                      clearable="true"></el-input>
                        </el-form-item>
                        <@but.search "search()" ":loading='tableVm.loading' :disabled='!addAble'"/>
                    </el-form>
                    <!--表格-->
                    <el-table ref="multipleTable" stripe :data="tableVm.data" border style="width: 100%"
                              v-loading="tableVm.loading" @selection-change="handleSelectionChange">
                        <el-table-column
                                type="selection"
                                width="55">
                        </el-table-column>
                        <el-table-column prop="mid" label="mib id" min-width="100"
                                         show-overflow-tooltip>
                            <template scope="scope">
                                <el-input width="100%" v-model="scope.row.mid" clearable
                                          maxlength="50"
                                          show-word-limit
                                          v-if="editIndex==scope.$index"></el-input>
                                <label v-if="editIndex!=scope.$index">{{scope.row.mid}}</label>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="名称" min-width="100"
                                         show-overflow-tooltip>
                            <template scope="scope">
                                <el-input width="100%" v-model="scope.row.name" clearable
                                          maxlength="20"
                                          show-word-limit
                                          v-if="editIndex==scope.$index"></el-input>
                                <label v-if="editIndex!=scope.$index">{{scope.row.name}}</label>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" min-width="300">
                            <template scope="scope">
                                <el-button v-if="editIndex!=scope.$index" type="warning" icon="el-icon-edit"
                                           size="small"
                                           :disabled="!addAble"
                                           @click="medit(scope.$index,scope.row)">编辑
                                </el-button>
                                <el-button v-if="editIndex!=scope.$index"
                                           type="primary" size="small"
                                           :disabled="!addAble"
                                           @click="translate(scope.$index,scope.row)"
                                           icon="icon-third-mini-fanyi1">转译
                                </el-button>
                                <el-button v-if="editIndex==scope.$index" type="success" icon="el-icon-success"
                                           size="small"
                                           @click="msave(scope.$index,scope.row)">保存
                                </el-button>
                                <el-button v-if="editIndex==scope.$index" type="danger" icon="el-icon-refresh-right"
                                           size="small"
                                           @click="cancel(scope.row)">取消
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <!--数值转译-->
                    <el-dialog :visible.sync="translateEditVm.visible" width="900px">
                        <div slot="title">
                            <div style="float: left;width: 100px;" class="el-dialog__title">{{translateEditVm.oprate}}
                            </div>
                            <div style="padding-top: 8px;color: #909399;">
                                Trap：{{translateEditVm.channelName}}
                            </div>
                        </div>
                        <el-col :span="24" class="toolbar">
                            <el-row>
                                <el-button type="success" plain size="small" icon="el-icon-plus" @click="addTranslate()">添加</el-button>
                            </el-row>
                        </el-col>
                        <el-form  :rules="translateEditVm.rules" :model="translateEditVm.form">
                            <el-table ref="multipleTable" stripe :data="translateEditVm.form.data" border style="width: 100%" >
                                <el-table-column label="采集数值"  min-width="100" show-overflow-tooltip :render-header="renderTranslateHeader">
                                    <template slot-scope="scope">
                                        <el-form-item required  :prop="'data.' + scope.$index + '.key'" class="is-no-asterisk"
                                                      :rules='translateEditVm.rules.key' v-if="scope.row.isEdit" style="margin-bottom: 0px;">
                                            <el-input v-model="scope.row.key" ></el-input>
                                        </el-form-item>
                                        <span v-if="!scope.row.isEdit">{{scope.row.key}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="转译数值"  min-width="100" show-overflow-tooltip :render-header="renderTranslateHeader">
                                    <template slot-scope="scope">
                                        <el-form-item required  :prop="'data.' + scope.$index + '.value'" class="is-no-asterisk"
                                                      :rules='translateEditVm.rules.value' v-if="scope.row.isEdit" style="margin-bottom: 0px;">
                                            <el-input v-model="scope.row.value"></el-input>
                                        </el-form-item>
                                        <span v-if="!scope.row.isEdit">{{scope.row.value}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" min-width="300">
                                    <template scope="scope">
                                        <@tabt.save "saveTranslate(scope.$index,scope.row)" 'v-if="scope.row.isEdit"' />
                                        <@tabt.edit "editTranslate(scope.$index,scope.row)" 'v-if="!scope.row.isEdit"'/>
                                        <@tabt.delete "deleteTranslate(scope.$index,scope.row)" 'v-if="!scope.row.isEdit"'/>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-form>
                    </el-dialog>
                </el-col>
            </section>
        </el-col>
    </div>
</@base.page>